<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="large-12 columns"> <div class="wrapper"> <div class="btn btn--border btn--primary btn--animated">I love Bangladesh</div> </div> </div> </div> </div>

.wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .btn { position: relative; display: inline-block; letter-spacing: 1.2px; padding: 12px 32px; text-align: center; text-transform: uppercase; overflow: hidden; z-index: 1; cursor: pointer; } .btn:focus { outline: none; } .btn--primary { color: lightslategray; } .btn--border { border-width: 1px; border-style: solid; border-radius: 10px; box-sizing: border-box; } .btn--animated { transition-property: color; transition-duration: 0.5s; } .btn--animated.btn--border.btn--primary { border: 1px solid lightslategray; } .btn--animated:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: lightslategray; transform: scaleX(0); transform-origin: 0 50%; transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease-out; z-index: -1; } .btn--animated:hover { color: white; } .btn--animated:hover:before { transform: scaleX(1); transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66); }